<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="service-container">
    <div class="service-title">
      <van-icon class="title-icon" name="arrow-left" @click="$router.back" />
      服务中心</div>
    <div class="service-header">
      <div class="service-box1">
        <van-icon class="box-icon1" name="service" />
        在线客服</div>
      <div class="service-box2">
        <van-icon class="box-icon2" name="phone" />
        在线客服</div>
    </div>
    <div class="service-rm">
      <text class="rmtext">热门问题</text>
    </div>
    <div class="service-item">
      <text class="service-item-text">超级会员权益说明</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">签到规则</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">用户等级说明</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">积分问题</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">教我拍大片</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">支付问题</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">其它问题</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">准时达问题</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">会员说明</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">会员问题</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">第三方信息数据共享</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">个人信息收集清单</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">喜欢我们，打分鼓励</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
    <div class="service-item">
      <text class="service-item-text">意见反馈</text>
      <van-icon class="service-item-icon" name="arrow" />
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.service-container {
  box-sizing: border-box;
  position: relative;
}
.service-title {
  width: 100%;
  height: 1.087rem;
  background: #0a92e7;
  font-size: 0.5314rem;
  color: #fff;
  line-height: 1.087rem;
  text-align: center;
}
.title-icon {
  position: absolute;
  top: 0.2657rem;
  left: 0.0966rem;
}
.service-header {
  width: 100%;
  height: 1.9324rem;
  display: flex;
  background: #fff;
  border-bottom: 0.0242rem solid #e5e2e2;
}
.service-box1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 0.3382rem;
  border-right: 0.0242rem solid #e5e2e2;
}
.service-box2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 0.3382rem;
}
.box-icon1 {
  color: red;
  padding-bottom: 0.1208rem;
  font-size: 0.4348rem;
}
.box-icon2 {
  color: green;
  padding-bottom: 0.1208rem;
  font-size: 0.4348rem;
}
.service-rm {
  width: 100%;
  height: 1.4493rem;
  font-size: 0.4831rem;
  line-height: 1.4493rem;
  background: #fff;
  border-bottom: 0.0242rem solid #e5e2e2;
}
.rmtext {
  padding-left: 0.3623rem;
}
.service-item {
  width: 100%;
  height: 0.9662rem;
  display: flex;
  align-items: center;
  border-bottom: 0.0242rem solid #e5e2e2;
  position: relative;
  background: #fff;
}
.service-item-text {
  font-size: 0.3382rem;
  padding-left: 0.3623rem;
  color: #717171;
}
.service-item-icon {
  position: absolute;
  font-size: 0.3382rem;
  top: 0.2899rem;
  right: 0.2415rem;
}
</style>
